@import 'var.scss';
@import 'theme.scss';

$black: #000 !default;
$white: #fff !default;
$gray-1: #f7f8fa !default;
$gray-2: #f2f3f5 !default;
$gray-3: #ebedf0 !default;
$gray-4: #dcdee0 !default;
$gray-5: #c8c9cc !default;
$gray-6: #969799 !default;
$gray-7: #646566 !default;
$gray-8: #323233 !default;

$primary: #1989fa !default;
$red: #ee0a24 !default;
$orange: #ed6a0c !default;
$yellow: #ffd01e !default;
$green: #07c160 !default;
$gray: $gray-8 !default;

$primary-light-1: mix($white, $primary, 10%) !default;
$primary-light-2: mix($white, $primary, 20%) !default;
$primary-light-3: mix($white, $primary, 30%) !default;
$primary-light-4: mix($white, $primary, 40%) !default;
$primary-light-5: mix($white, $primary, 50%) !default;
$primary-light-6: mix($white, $primary, 60%) !default;
$primary-light-7: mix($white, $primary, 70%) !default;
$primary-light-8: mix($white, $primary, 80%) !default;
$primary-light-9: mix($white, $primary, 90%) !default;

$red-soft: mix($white, $red, 20%) !default;
$red-light: mix($white, $red, 40%) !default;
$red-lighter: mix($white, $red, 60%) !default;
$red-extra-light: mix($white, $red, 80%) !default;

$green-soft: mix($white, $green, 20%) !default;
$green-light: mix($white, $green, 40%) !default;
$green-lighter: mix($white, $green, 60%) !default;
$green-extra-light: mix($white, $green, 80%) !default;

$yellow-soft: mix($white, $yellow, 20%) !default;
$yellow-light: mix($white, $yellow, 40%) !default;
$yellow-lighter: mix($white, $yellow, 60%) !default;
$yellow-extra-light: mix($white, $yellow, 80%) !default;

$orange-soft: mix($white, $orange, 20%) !default;
$orange-light: mix($white, $orange, 40%) !default;
$orange-lighter: mix($white, $orange, 60%) !default;
$orange-extra-light: mix($white, $orange, 80%) !default;

$border-color: $gray-3 !default;
$background-color: $gray-2 !default;
